<style>

html, body{
    margin: 0; padding: 0; 
}
#main{
    user-select: none;
    /* height: 100vh; */
}
.btn-panel{
    width: 20vw;
    position: fixed; bottom: 10vh; right: 5vw; 
}
#stage{
    width: 40vh; height: 100vh; margin:0 auto; display: flex; flex-direction: column-reverse; align-items: start;
    position: relative;overflow: hidden; 
}
#player-panel{
    width: 100%; height: 150px; position: absolute; bottom: 0px; 
    display: flex; justify-content: center; cursor: move; z-index: 10;
}
#player{
    width: 10vh; height: 50px; background-color: red; align-items: center; justify-content: center; display: flex; position: absolute;transform: translateX(-50%); left: 50%; bottom: 50px; z-index: 5;
}
#map-panel{
    position: relative; width: 100%; height: 100px;
}
#map{
    width: 100%; background:url('/Public/game/images/back.jpg') bottom; background-size: 100%; display: flex; flex-direction:column-reverse;position:absolute; bottom: 0; z-index: 1;
}
#map-content{
    width: 100%; height: 100%; position: relative; 
}
.map-item{
    position:absolute; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.map-item .item{
    background-color: lightgray; height: 50px; display: flex; align-items: center; justify-content: center;width: 100%;
}
.gateQuestion2{
    flex-direction: row; display: flex;
}
.gateQuestion2 .item{
    width: 50%;
}
.map-item span{
    font-size:2rem; display: block; 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
</style>
<div id="main">
    <div id="stage">
        <!-- 拖拽控制区 -->
        <div id="player-panel"></div>
        <!-- 玩家区 -->
        <div id="player">玩家</div>
        <!-- 监听重叠区 -->
        <div id="map-panel">
            <div id="map" style="height: {$config['length'] * 10}px;">
                <div id="map-content">
                    <volist name="items" id="vo">
                        <div class="map-item" style="bottom: {$vo['pos'] * 10}px;">
                            {$vo.pos}: {$vo.type} 
                            <!-- 答题门逻辑 -->
                            <if condition="$vo['type'] eq 'gateQuestion2'">
                                <div class="title">{$vo['params']['title']}</div>
                                <div class="item gateQuestion2">
                                    <volist name="vo['params']['options']" id="vo2">
                                        <div class="item observe-item" data-type="gateQuestion2" data-res="{$vo2['result']}">
                                            {$vo2.option}
                                        </div>
                                    </volist>
                                </div>
                            </if>
                            <if condition="$vo['type'] eq 'setSpeed'">
                                <div class="item setSpeed">
                                    <div class="item observe-item" data-type="speedUp" data-speed="{$vo['params']['speed']}"></div>
                                </div>
                            </if>
                            <if condition="$vo['type'] eq 'terminal'">
                                <div class="item terminal">
                                    <div class="item observe-item" data-type="terminal"></div>
                                </div>
                            </if>
                        </div>
                    </volist>
                </div>
            </div>
        </div>  
    </div>

    <div class="btn-panel">
        <div>
            <div class="player-info">
                <div id="config" data-speed="{$config.speed}" data-length="{$config.length}">
                    <div>speed:<span id="speed">{$config.speed}</span></div>
                    <div>status: <span id="status">live</span></div>
                </div>
            </div>
        </div>
        <div>

            <button id="start-btn">开始游戏</button>
            <button id="stop-btn">暂停游戏</button>
            <button id="reset-btn">重置游戏</button>
        </div>
        
    </div>
</div>

<script type="text/javascript">
let gameStatus = {
    status: 'stop',
    length: parseInt($("#config").attr("data-length"))
}
let playerStatus = {
    move: 'wait',
    speed: parseInt($("#status").attr("data-speed")),
    follow: 1,
    status: []
}
let controlStatus = {
    drag: false
}
// 人物拖拽
let playerPanel = document.getElementById('player-panel')
let player = document.getElementById('player')
// 监听拖拽事件
playerPanel.addEventListener('mousedown', function(e) {
    controlStatus.drag = true
});
playerPanel.addEventListener('mousemove', function(e) {
    if(!controlStatus.drag){
        return
    }
    // 阻止默认处理以允许放置
    var x = e.offsetX; // 获取相对于放置区域的X坐标
    player.style.left = x + 'px'; // 更新元素位置
})
playerPanel.addEventListener('mouseup', function(e) {
    console.log('up');
    controlStatus.drag = false 
})
playerPanel.addEventListener('mouseleave', function(e) {
   console.log('leave'); 
})

$("#stop-btn").click(function(){
    gameStatus.status ='stop'
})

$("#start-btn").click(function(){
    gameStart()
})

function changeSpeed(speed){
    let restLength = $("#map").position().top
    console.log(restLength);
    let time = -restLength / speed * 100
    $("#map").stop().animate({
        top: 0
    }, time, 'linear')
    $("#speed").text(speed)
}

function gameStart(){
    let restLength = $("#map").position().top
    console.log(restLength);
    gameStatus.status ='start'
    let speed = $("#config").attr('data-speed')
    console.log(gameStatus.length);
    $("#map").animate({
        top: 0 
    }, -restLength / speed * 100, 'linear')
}
// 监听碰撞
const observeTarget = document.getElementById('map-panel');
// 视口重叠监听 用于判断碰撞事件
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        // 当元素进入视口时触发
        if (entry.isIntersecting) {
            // 判断左右 具体哪个元素
            let playerPos = (player.getBoundingClientRect().left + player.getBoundingClientRect().right) /2
            if(playerPos >= entry.boundingClientRect.left && playerPos <= entry.boundingClientRect.right){
                let itemType = entry.target.dataset.type
                if(itemType == 'terminal'){
                    gameStatus.status = 'success'
                    $("#status").text("success")
                }
                if(itemType == 'speedUp'){
                    changeSpeed(entry.target.dataset.speed)
                }
                if(itemType == 'gateQuestion2'){
                    // 答题
                    let res = entry.target.dataset.res 
                    $("#status").text(res)
                    if(res == 'wrong'){
                        $("#map").stop()
                        alert('fail')
                    }
                }
            }
        } 
    })
},{
    root: observeTarget,
    // threshold: 0.00000001,
})
// 监听元素
const targetItems = document.querySelectorAll('.observe-item');
for(let i = 0;i<targetItems.length;i++){
    observer.observe(targetItems[i]);
}
</script>